<template>
    <div class="charts-container">
        <el-row class="charts">
            <el-col :span="12" class="chart">
                <v-chart :options="booksData"></v-chart>
            </el-col>
            <el-col :span="12" class="chart">
                <v-chart :options="cordsData"></v-chart>
            </el-col>
        </el-row>
        <el-row class="charts">
            <el-col :span="12" class="chart">
                <v-chart :options="recordsData"></v-chart>
            </el-col>
            <el-col :span="12" class="chart">
                <v-chart :options="usersData"></v-chart>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "HeadingCharts",
        data(){
          return {
              booksData: {
                  title: {text:"图书在库数量",left:"center"},
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [820, 932, 901, 934, 1290, 1330, 1320],
                      type: 'line',
                      smooth: true
                  }]
              },cordsData: {
                  title: {text:"图书查询数量",left:"center"},
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [1340, 1423, 1800, 1550, 1750, 1640, 1845],
                      type: 'line',
                      smooth: true
                  }]
              },recordsData: {
                  title: {text:"借阅记录数量",left:"center"},
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [5000, 4586, 4215, 3400, 4530, 3421, 4235],
                      type: 'line',
                      smooth: true
                  }]
              },usersData: {
                  title: {text:"用户访问量",left:"center"},
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [1000, 1005, 1035, 1040, 1042, 1044, 1050],
                      type: 'line',
                      smooth: true
                  }]
              }
          }
        }
    }
</script>

<style scoped>
    .charts-container{
        height: 100%;
    }
    .charts{
        height: 50%;
    }
    .chart{
        height: 100%;
    }
    .books{
        height: 100%;
    }
    .echarts{
        width: 100%;
        height: 100%;
    }
</style>